import React, { Component } from "react";
import { Card, Button } from "antd-mobile";
import { connect } from "react-redux";
import userImg from "../assets/imgs/sp.jpg";
export class Mine extends Component {
  // 退出登录
  logout = () => {
    // 修改reducer登录状态置为false，跳转到首页
    this.props.changeLoginState(false);
    this.props.history.push("/");
  };

  render() {
    return (
      <div>
        <Card>
          {/* <Card.Header
            title="jack"
            thumb={userImg}
            extra={<span>小秃头</span>}
          /> */}
          <div className="userImg">
            <img src={userImg} alt="" />
            <div className="userName">外号:江湖称挺秃然</div>
            <span className="user-tag">行动出成果,工作出财富</span>
          </div>
          <Card.Body>
            <div>比一比这两条鱼谁长的帅，长得帅就是明天的菜。</div>
          </Card.Body>
          <Card.Footer content="996.ICU" extra={<div></div>} />
        </Card>
        <Button onClick={this.logout}>退出登录</Button>
        <style jsx>{`
          .userImg {
            padding: 10px;
            > img {
              border-radius: 50%;
              width: 80px;
            }
            .userName {
              font-size: 20px;
              position: absolute;
              top: 20px;
              left: 30%;
            }
            .user-tag {
              font-size: 14px;
              color:#ccc;
              position: absolute;
              top: 60px;
              left: 30%;
            }
          }
        `}</style>
      </div>
    );
  }
}
// 创建映射函数，提交action
const mapActionToProps = (dispatch) => {
  return {
    changeLoginState: (newState) => {
      dispatch({ type: "SET_LOGIN_STATE", payload: newState });
    },
  };
};
export default connect(null, mapActionToProps)(Mine);
